<template>
    <view>
        <!-- <back></back> -->
        <view class="out">
            <view class="u-flex-center u-row-between u-m-b-30">
                <view class="top-left">收货地址</view>
                <view class="u-flex-center" @click="isAcquiesce = !isAcquiesce">
                    <view class="square">
                        <image
                            src="@/static/index/def.png"
                            v-if="isAcquiesce"
                            class="sign"
                            mode="widthFix"
                        >
                        </image>
                    </view>
                    <view class="top-title">设为默认地址</view>
                </view>
            </view>
            <view>
                <view class="card u-flex-center u-row-between">
                    <view>收货人</view>
                    <input
                        type="text"
                        v-model="form.name"
                        placeholder="请输入收货人姓名"
                        placeholder-class="input-sty"
                    />
                </view>
                <view class="card u-flex-center u-row-between">
                    <view>手机号码</view>
                    <input
                        type="number"
                        v-model="form.phone"
                        placeholder="请输入手机号码"
                        placeholder-class="input-sty"
                    />
                </view>
                <view class="card u-flex-center u-row-between" @click="show = true">
                    <view>所在地区</view>
                    <view class="select-address u-flex-center">
                        <text>{{ form.formatted_address || "请选择地区" }}</text>
                        <image src="@/static/yCreate/right.png" mode="widthFix"></image>
                    </view>
                </view>
                <view class="card u-flex-center u-row-between" @click="is_street_show = true">
                    <view>所属街道</view>
                    <view class="select-address u-flex-center">
                        <text>{{ streetanme || "请选择街道" }}</text>
                        <image src="@/static/yCreate/right.png" mode="widthFix"></image>
                    </view>
                </view>
                <view class="card u-flex-center u-row-between" @click="is_community_show = true">
                    <view>小区名称</view>
                    <view class="select-address u-flex-center">
                        <text>{{ communityname || "请选择小区" }}</text>
                        <image src="@/static/yCreate/right.png" mode="widthFix"></image>
                    </view>
                </view>
                <view class="card">
                    <view>详细地址</view>
                    <textarea
                        v-model="form.address"
                        placeholder="请输入详细地址"
                        maxlength="-1"
                        placeholder-class="input-sty"
                    ></textarea>
                </view>
            </view>
        </view>
        <view style="height: 100rpx; width: 100%"></view>
        <view class="u-flex-center">
            <view class="button u-flex-center" @click="save">保存地址</view>
        </view>
        <u-picker
            mode="region"
            v-model="show"
            @confirm="confirm"
            confirm-color="#5D64CA"
        ></u-picker>
        <!-- 所属街道 -->
        <view class="layer flex align-end" v-if="is_street_show" @click="is_street_show = false">
            <view class="layerbg" @click.stop>
                <view class="position-relative padding-top-40 flex align-center">
                    <view class="text-28 text-center flex-one">请选择街道</view>
                    <view class="context" @click="choseStreet()">确认</view>
                </view>
                <view class="padding-lr-20 padding-tb-15 bg-ff radius-10 margin-top-20">
                    <view class="padding-20 flex align-center radius-10 bg-f5 margin-lr-30">
                        <image
                            src="../../static/wImg/greySea.png"
                            mode=""
                            class="searchimg"
                        ></image>
                        <view class="searchline"></view>
                        <input
                            type="text"
                            placeholder="输入您想要的内容"
                            class="text-24 flex-one"
                            v-model="keyword"
                            @confirm="searchStreet"
                        />
                    </view>
                    <picker-view
                        :value="multiIndex"
                        :indicator-style="indicatorStyle"
                        class="picker-view"
                        @change="changeStreet"
                    >
                        <picker-view-column>
                            <view
                                class="item-pircker"
                                v-for="(item, index) in streetlist"
                                :key="index"
                                >{{ item.name }}
                            </view>
                        </picker-view-column>
                    </picker-view>
                </view>
            </view>
        </view>
        <!-- 所属小区 -->
        <view
            class="layer flex align-end"
            v-if="is_community_show"
            @click="is_community_show = false"
        >
            <view class="layerbg" @click.stop>
                <view class="position-relative padding-top-40 flex align-center">
                    <view class="text-28 text-center flex-one">请选择小区</view>
                    <view class="context" @click="choseCommunity()">确认</view>
                </view>
                <view class="padding-lr-20 padding-tb-15 bg-ff radius-10 margin-top-20">
                    <view class="padding-20 flex align-center radius-10 bg-f5 margin-lr-30">
                        <image
                            src="../../static/wImg/greySea.png"
                            mode=""
                            class="searchimg"
                        ></image>
                        <view class="searchline"></view>
                        <input
                            type="text"
                            placeholder="输入您想要的内容"
                            class="text-24 flex-one"
                            v-model="keyword"
                            @confirm="searchCommunity"
                        />
                    </view>
                    <picker-view
                        :value="comiIndex"
                        :indicator-style="indicatorStyle"
                        class="picker-view"
                        @change="changeCommunity"
                    >
                        <picker-view-column>
                            <view
                                class="item-pircker"
                                v-for="(item, index) in communitylist"
                                :key="index"
                                >{{ item.name }}
                            </view>
                        </picker-view-column>
                    </picker-view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            isAcquiesce: false,
            form: {
                name: "",
                phone: "",
                formatted_address: "",
                address: "",
                province: "",
                city: "",
                district: "",
                id: "",
            },
            type: "",
            streetlist: [],
            streetanme: "",
            multiIndex: [0],
            comiIndex: [0],
            indicatorStyle: "height: 60rpx;",
            is_street_show: false,
            keyword: "",
            streetid: "",
            is_community_show: false,
            communitylist: [],
            communityname: "",
            communityid: "",
        };
    },
    onLoad(options) {
        this.type = options.type;
        if (options.data) {
            const data = JSON.parse(options.data);
            this.id = data.id;
            console.log(data, "data");
            this.form.address = data.address;
            this.form.city = data.city;
            this.isAcquiesce = data.address_full == 0 ? false : true;
            this.form.district = data.district;
            this.form.formatted_address = data.formatted_address;
            this.form.phone = data.mobile;
            this.form.name = data.name;
            this.form.province = data.province;
            this.streetanme = data.street_name;
            this.communityname = data.community_name;
        }
    },
    methods: {
        save() {
            this.$u
                .post("/api/wanlshop/address/address", {
                    data: {
                        id: this.id ? this.id : "",
                        address: this.form.address,
                        address_full: this.form.address,
                        city: this.form.city,
                        country: "中国",
                        default: !this.isAcquiesce ? 0 : 1,
                        district: this.form.district,
                        formatted_address: this.form.formatted_address,
                        mobile: this.form.phone,
                        name: this.form.name,
                        province: this.form.province,
                        street_id: this.streetid,
                        community_id: this.communityid,
                        community_name: this.communityname,
                        street_name: this.streetanme,
                    },
                    type: this.type,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.$u.toast(res.msg);
                        uni.navigateBack();
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
        },
        confirm(e) {
            this.form.formatted_address =
                e.province.label + "/" + e.city.label + "/" + e.area.label;
            this.form.province = e.province.label;
            this.form.city = e.city.label;
            this.form.district = e.area.label;
            this.getStreet();
        },
        //街道列表
        async getStreet() {
            let res = await this.$api.service.getStreet({
                area: this.form.formatted_address,
                keyword: this.keyword,
            });
            console.log(res, "街道列表");
            this.streetlist = res;
        },
        // 小区列表
        async getCommunity() {
            let res = await this.$api.service.getCommunity({
                area: this.form.formatted_address,
                street_id: this.streetid,
            });
            console.log(res, "小区列表");
            this.communitylist = res;
        },
        changeStreet(e) {
            let curMultiIndex = e.detail.value;
            if (curMultiIndex[0] != this.multiIndex[0]) {
                this.multiIndex = [curMultiIndex[0]];
            }
            console.log(this.multiIndex);
        },
        changeCommunity(e) {
            let curMultiIndex = e.detail.value;
            if (curMultiIndex[0] != this.comiIndex[0]) {
                this.comiIndex = [curMultiIndex[0]];
            }
            console.log(this.comiIndex);
        },
        choseStreet() {
            var i = this.multiIndex[0];
            this.streetanme = this.streetlist[i].name;
            this.streetid = this.streetlist[i].id;
            console.log(this.streetanme, this.streetid);
            this.keyword = "";
            this.getCommunity();
            this.is_street_show = false;
        },
        choseCommunity() {
            var i = this.comiIndex[0];
            this.communityname = this.communitylist[i].name;
            this.communityid = this.communitylist[i].id;
            console.log(this.communityname, this.communityid);
            this.keyword = "";
            this.is_community_show = false;
        },
        searchStreet() {
            this.getStreet();
        },
    },
};
</script>

<style lang="scss">
@import url(@/components/common.css);

.square {
    flex-shrink: 0;
    width: 32rpx;
    height: 32rpx;
    position: relative;
    margin-right: 10rpx;
    border: 1rpx solid #dcdcdc;
    border-radius: 50%;

    image {
        width: 31rpx;
        height: auto;
        position: absolute;
        bottom: 0rpx;
        left: 0;
    }
}

.out {
    padding: 30rpx;

    .top-left {
        font-size: 32rpx;
        font-weight: bold;
    }

    .top-title {
        font-size: 28rpx;
    }

    .card {
        margin-bottom: 20rpx;
        padding: 30rpx;
        background: #ffffff;
        border-radius: 10rpx;
        opacity: 1;

        view {
            font-size: 28rpx;
            font-weight: bold;
        }

        input {
            text-align: right;
            font-size: 28rpx;
        }

        .input-sty {
            font-size: 28rpx;
            color: #888888;
        }

        textarea {
            height: 140rpx;
        }

        .select-address {
            font-size: 28rpx;

            image {
                margin-left: 10rpx;
                width: 10rpx;
                height: auto;
            }
        }
    }
}

.button {
    position: fixed;
    bottom: 60rpx;
    width: 630rpx;
    height: 80rpx;
    background: linear-gradient(98deg, #5d64ca 0%, #6f9bdf 100%);
    border-radius: 40rpx;
    font-size: 28rpx;
    color: #ffffff;
}

.layer {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}

.layerbg {
    width: 750rpx;
    height: 516rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
}

.context {
    font-size: 28rpx;
    color: #606dce;
    right: 30rpx;
    position: absolute;
}

.searchimg {
    width: 25rpx;
    height: 23rpx;
}

.searchline {
    width: 2rpx;
    height: 32rpx;
    background: #b0b0b0;
    margin: 0 20rpx;
}

.van-img {
    width: 100%;
    height: 100%;
}

.picker-view {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 300rpx;
    background: #fff;
}

.item-pircker {
    line-height: 60rpx;
    height: 60rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
